<template>
  <div class="lUploadImg">
    <div class="left">
      <div class="label"><span class="require">*</span>{{props.label}}</div>
      <div class="tip">(支持jpg、jepg、png图片，最佳像素比例{{props.size}}。大小请控制在1M以内。)</div>
    </div>
    <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" deletable>
      <div class="right" v-if="!imgPath">
        <u-icon name="plus" :size="24"></u-icon>
      </div>
      <image class="img" v-else :src="imgPath" />
    </u-upload>
  </div>
</template>

<script setup>
import { request } from '@/util/request'
import { ref } from 'vue'
import { baseUrl } from '@/config/config'
const props = defineProps({
  label: '',
  rule: { require: false, reg: '', message: '' },
  size: '375*375'
})
const fileList = ref()
const imgPath = ref('')
function afterRead(event) {
  imgPath.value = event.file.url
}

async function upload() {
  return new Promise((resolve, rej) => {
    if (imgPath.value == '') {
      resolve('')
    } else {
      uni.uploadFile({
        url: baseUrl + 'uploads/files',
        filePath: imgPath.value,
        name: 'img',
        success: function (res) {
          resolve(res.content.img)
        }
      })
    }
  })
}

defineExpose({
  upload
})



</script>

<style lang="scss" scoped>
.lUploadImg {
  padding-top: 20rpx;
  display: flex;
  justify-content: space-between;
  .left {
    flex: 0.75;
    .label {
      padding-top: 15rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #333333;
    }
    .require {
      color: #df5146;
    }
    .tip {
      font-size: 20rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #bbbbbb;
    }
  }
  .right {
    width: 160rpx;
    height: 160rpx;
    border: 2rpx dashed #d8d8d8;
    border-radius: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .img {
    width: 160rpx;
    height: 160rpx;
  }
  .u-upload {
    flex: unset !important;
  }
}
</style>